<script setup lang="ts">
// 走马灯
import Carousel from '@/components/Carousel/Carousel.vue'
import FlexRight from '@/components/Echart/flexGlobal/flexRight.vue'
// 各大区业绩占比
import AreaPie from '@/components/PermissionsModule/Performance/components/AreaPie.vue'
// 新老会员业绩占比
import NewOldPie from '@/components/PermissionsModule/Performance/components/NewOldPie.vue'
// 零售业绩与拓展业绩占比
import RetailPie from '@/components/PermissionsModule/Performance/components/RetailPie.vue'
// 全球各区业绩环比
import globalPerformanceRatio from '@/components/PermissionsModule/Performance/components/globalPerformanceRatio.vue'
// 全球各区业绩同比
import globalPerformanceYoY from '@/components/PermissionsModule/Performance/components/globalPerformanceYoY.vue'
// 全球业绩趋势
import globalPerformanceLine from '@/components/PermissionsModule/Performance/components/globalPerformanceLine.vue'
// 注册用户数
const components = {
  FlexRight,
}
// 暴露组件
defineExpose({
  components,
})
</script>
<template>
  <!-- 右侧图表集合 -->
  <FlexRight />
  <!-- 轮播图 -->
  <Carousel class="carousel" :interval="5000">
    <globalPerformanceLine />
  </Carousel>
  <Carousel class="carousel" :interval="5000">
    <globalPerformanceRatio />
    <globalPerformanceYoY />
  </Carousel>

  <Carousel class="carousel" :interval="5000">
    <AreaPie />
    <NewOldPie />
    <RetailPie />
  </Carousel>
</template>
<style lang="scss" scoped>
.carousel {
  width: 100%;

  :deep(.el-carousel__container) {
    height: 260px;
  }
}
</style>
